import { preChargingList } from "@/services/chargingManage";
import { Button, Card, DatePicker, Form, Input, Pagination, Table } from "antd";
import moment from "moment";
import React from "react";

class ChargingAccount extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      current:1,
      size:10,
      loading:false,
      list:[],
      total:0
    }
  }

  componentDidMount(){
    this.getList()
  }

  getList = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size } = this.state
      const info = this.props.form.getFieldsValue;
      let obj = {
        current,
        size,
        search:info.search,
        startDate:info.time && info.time[0] ? moment(info.time[0]).format("YYYY-MM-DD") : '',
        endDate:info.time && info.time[1] ? moment(info.time[1]).format("YYYY-MM-DD") : ''
      }
      console.log(obj);
      
      // const res = await preChargingList(obj)

      // this.setState({
      //   loading:false,
      //   list:res.records,
      //   total:res.total
      // })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getList()
    })
  }

  openModal = () => {

  }

  render(){
    const { form:{getFieldDecorator}} = this.props
    const { current,size,list,total,loading } = this.state
    const columns = [
      {
        title:"序号",
        dataIndex:"index",
        width:100,
        render:(item,row,index) => {
          return (current - 1) * size + (index + 1)
        }
      },
      {
        title:"服务商",
        dataIndex:"name",
        width:200
      },
      {
        title:"年",
        dataIndex:"remark",
        width:200
      },
      {
        title:"月",
        dataIndex:"createTime",
        width:200,
      },
      {
        title:"总金额",
        dataIndex:"company",
        width:150
      },
      {
        title:"账单明细",
        dataIndex:"",
        width:100,
        render:(item,row,index) => {
          <Button type="line" size="small" onClick={() => this.openModal(row.id)}>查看</Button>
        }
      }
    ]
    return (
      <Card style={{height:"100%"}}>
        <div className="topOptionBox">
          <Form layout="inline">
            <Form.Item>
              {getFieldDecorator("search")(<Input.Search  placeholder="搜索计费名称、备注" style={{width:250}} onSearch={() => this.doSearch(1,size)} />)}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("time")(
                <DatePicker.RangePicker onChange={() => this.doSearch(1,size)} />
              )}
            </Form.Item>
          </Form>
        </div>

        <Table 
          columns={columns}
          dataSource={list}
          loading={loading}
          rowKey={'id'}
          scroll={{x:"auto"}}
          pagination={false}
        />

        {
          total > 10 ? (
            <div style={{textAlign:"right",marginTop:10}}>
              <Pagination 
                total={total}
                current={current}
                pageSize={size}
                showQuickJumper={true}
                showSizeChanger={true}
                onChange={this.doSearch}
                onShowSizeChange={this.doSearch}
              />
            </div>
          ) : ' '
        }
      </Card>
    )
  }

}

export default Form.create()(ChargingAccount)